<template>
<div class="head-container">
    <img 
        class="picture"
        src="https://file.dumogu.top/blog_mine.jpg?imageView2/1/w/300/h/300/q/75"
        alt="哈哈哈">
    <div class="name">
        哈哈哈
    </div>
    <MyTabsSlot
        class="tab-list"
        :activeIndex='activeIndex'>
        <div
            :class="{
                'item':true,
                'active-item':index==activeIndex,
            }"
            v-for="(item,index) in tabList"
            :key="index"
            @click="activeIndex=index">
            {{item.name}}
        </div>
    </MyTabsSlot>
</div>
</template>
<script>
/*
 头部组件
 */
import MyTabsSlot from "./MyTabsSlot";
import {isClient} from "~/common/OtherTools";
export default {
    name:"Head",
    components:{MyTabsSlot},
    data(){ 
        return{
            activeIndex:-1,
            tabList:[
                {name:'首页'},
                {name:'归档'},
                {name:'关于'},
                {name:'友人帐'},
            ],
        }
    },
    created(){
        if (!isClient()) return;
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.head-container{
    width: 100%;
    height:fit-content;
    transition:all 0.2s;
    box-sizing: border-box;
    padding: 30px;
    background-color:rgb(255, 255, 255);
    z-index: 999;
    display: grid;
    grid-gap: 15px;
    justify-content: center;
    justify-items: center;
    border-bottom: 1px solid rgb(233, 233, 233);
    >.picture{
        width: 120px;
        height: 120px;
        object-fit: contain;
        border-radius: 50%;
        border: 3px solid rgb(233, 233, 233);
        box-sizing: border-box;
        box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.115);
    }
    >.name{
        font-size: 30px;
        text-align: center;
    }
    >.tab-list{
        width:fit-content;
        --my-tabs-padding:3px;
        --my-tabs-border-radius:5px;
        box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.115);
        >.item{
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 7px 15px;
            box-sizing: border-box;
            font-size: 17px;
            color: rgb(152, 152, 152);
        }
        >.active-item{
            color: rgb(0, 85, 255);
        }
    }
}
</style>